<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="page-header">
			<text class="header-title">我投递的简历</text>
			<text class="header-subtitle">查看您投递的所有家教简历</text>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stat-item">
				<text class="stat-number">{{ deliveryList.length }}</text>
				<text class="stat-label">总投递</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ waitingCount }}</text>
				<text class="stat-label">待回复</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ acceptedCount }}</text>
				<text class="stat-label">已接受</text>
			</view>
		</view>

		<!-- 简历列表 -->
		<view class="delivery-list" v-if="deliveryList.length > 0">
			<view class="delivery-card" v-for="(item, index) in deliveryList" :key="index" @click="viewDetail(item)">
				<!-- 卡片头部 -->
				<view class="card-header">
					<view class="subject-tag">{{ item.subject }}</view>
					<view class="status-tag" :class="getStatusClass(item.status)">
						{{ item.status }}
					</view>
				</view>

				<!-- 卡片内容 -->
				<view class="card-content">
					<view class="info-row">
						<text class="info-label">家教区域：</text>
						<text class="info-value">{{ item.area }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">薪酬要求：</text>
						<text class="info-value price">{{ item.salary }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">投递时间：</text>
						<text class="info-value time">{{ formatTime(item.deliveryTime) }}</text>
					</view>
				</view>

				<!-- 卡片底部操作 -->
				<view class="card-footer">
					<view class="action-btn view-btn" @click.stop="viewDetail(item)">
						<text class="btn-text">查看详情</text>
					</view>
					<view class="action-btn contact-btn" @click.stop="contactStudent(item)"
						v-if="item.status === '已接受'">
						<text class="btn-text">联系学生</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<view class="empty-icon">📝</view>
			<text class="empty-text">您还没有投递简历</text>
			<text class="empty-hint">去找家教需求投递简历吧~</text>
			<view class="empty-action" @click="goToList">
				<text class="action-text">去看看</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 我投递的简历页面
	 * 展示用户投递的所有家教简历记录
	 */
	import * as api from '@/api/family'
	export default {
		name: 'MyDeliveryPage',
		data() {
			return {
				deliveryList: []
			}
		},
		computed: {
			// 待回复数量
			waitingCount() {
				return this.deliveryList.filter(item => item.status === '待回复').length;
			},
			// 已接受数量
			acceptedCount() {
				return this.deliveryList.filter(item => item.status === '已接受').length;
			}
		},
		onShow() {
			// 每次显示页面时加载数据
			this.loadDeliveryList();
		},
		methods: {
			/**
			 * 加载投递简历列表（Mock数据）
			 */
			loadDeliveryList() {
				uni.showLoading({
					title: '加载中...'
				});

				api.myDeliverylistApi().then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.deliveryList = res.data
					}
				}).catch(err=>{
					uni.showToast({
						title: '请重试',
						icon: 'error'
					});
				})
				uni.hideLoading()
			},

			/**
			 * 格式化时间
			 */
			formatTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const now = new Date();
				const diff = now - date;

				// 小于1分钟
				if (diff < 60000) {
					return '刚刚';
				}
				// 小于1小时
				if (diff < 3600000) {
					return `${Math.floor(diff / 60000)}分钟前`;
				}
				// 小于1天
				if (diff < 86400000) {
					return `${Math.floor(diff / 3600000)}小时前`;
				}
				// 小于7天
				if (diff < 604800000) {
					return `${Math.floor(diff / 86400000)}天前`;
				}
				// 格式化为日期
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			},

			/**
			 * 获取状态样式类名
			 */
			getStatusClass(status) {
				const statusMap = {
					'待回复': 'status-waiting',
					'已接受': 'status-accepted',
					'已拒绝': 'status-rejected'
				};
				return statusMap[status] || 'status-waiting';
			},

			/**
			 * 查看详情
			 */
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/jiajiao/student-detail?id=${item.studentId}`
				});
			},

			/**
			 * 联系学生
			 */
			contactStudent(item) {
				uni.showModal({
					title: '联系学生',
					content: '是否拨打学生电话？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '正在为您转接',
								icon: 'none'
							});
						}
					}
				});
			},

			/**
			 * 前往需求列表
			 */
			goToList() {
				uni.navigateTo({
					url: '/pages/jiajiao/student'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	.container {
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: 20rpx;
	}

	/* 页面头部 */
	.page-header {
		background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
		padding: 60rpx 30rpx 40rpx;
		color: white;
	}

	.header-title {
		font-size: 44rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 12rpx;
	}

	.header-subtitle {
		font-size: 26rpx;
		opacity: 0.9;
		display: block;
	}

	/* 统计信息 */
	.stats-section {
		display: flex;
		background: white;
		margin: -20rpx 30rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.stat-item {
		flex: 1;
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		position: relative;

		&:not(:last-child)::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 60rpx;
			background: #f0f0f0;
		}
	}

	.stat-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #ff6b35;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	/* 简历列表 */
	.delivery-list {
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.delivery-card {
		background: white;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.subject-tag {
		background: #f8f8f8;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-weight: 600;
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 600;

		&.status-waiting {
			background: #fffaf5;
			color: #ff8f00;
		}

		&.status-accepted {
			background: #f5faf5;
			color: #2ecc71;
		}

		&.status-rejected {
			background: #fff5f5;
			color: #f44336;
		}
	}

	/* 卡片内容 */
	.card-content {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
	}

	.info-label {
		font-size: 26rpx;
		color: #666;
		width: 160rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;

		&.price {
			color: #ff6b35;
			font-weight: bold;
		}

		&.time {
			color: #999;
			font-size: 24rpx;
		}
	}

	/* 卡片底部 */
	.card-footer {
		display: flex;
		gap: 12rpx;
		padding-top: 20rpx;
		margin-top: 20rpx;
		border-top: 2rpx dashed rgba(0, 0, 0, 0.08);
	}

	.action-btn {
		flex: 1;
		padding: 18rpx 20rpx;
		border-radius: 12rpx;
		text-align: center;
		transition: all 0.2s ease;

		&:active {
			opacity: 0.8;
		}
	}

	.view-btn {
		background: #f8f8f8;
		color: #666;

		&:active {
			background: #eeeeee;
		}
	}

	.contact-btn {
		background: #ff6b35;
		color: white;

		&:active {
			background: #e55a2b;
		}
	}

	.btn-text {
		font-size: 26rpx;
		font-weight: 600;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 30rpx;
		text-align: center;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.empty-hint {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.empty-action {
		background: #ff6b35;
		color: white;
		padding: 20rpx 60rpx;
		border-radius: 60rpx;
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.3);
	}

	.action-text {
		font-size: 28rpx;
		font-weight: 500;
		color: white;
	}
</style>